<template>
	<view class="container">
		<view class="mingxi" @click="mingxi">明细</view>
		<view class="com-bg">
			<view class="com">
				<view class="com-top">
					<view class="com-top-left">
						<text class="text">账户余额(元)</text>
						<text class="balance">{{ moneyInfo.nowMoney || 0 }}</text>
					</view>
					<view class="com-top-right" @click="toTixian">
						<view class="btn">提现</view>
					</view>
				</view>
				<view class="com-bottom">
					<view class="bottom-item">
						<view class="label">累计招生人数</view>
						<view class="content">{{ moneyInfo.amount || 0 }}人</view>
					</view>
					<view class="bottom-item">
						<view class="label">昨日收入</view>
						<view class="content">{{ amount.upMoney || 0 }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="com-detail">
			<u-tabs-swiper
				ref="uTabs"
				:bar-style="barStyle"
				:fontSize="tabOptions['font-size']"
				:activeColor="tabOptions['active-color']"
				:inactiveColor="tabOptions['inactive-color']"
				:barWidth="tabOptions['bar-width']"
				:bgColor="tabOptions['bg-color']"
				:gutter="tabOptions.gutter"
				:list="list"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
				swiperWidth="750"
			/>

			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(tab, index) in list" :key="index">
					<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
						<view class="content">
							<view class="receive-item" v-for="(item, index) in dataList" :key="index">
								<view class="left">
									<image :src="item.headPic" mode="scaleToFill" />
									<view class="info">
										<view class="text">{{ item.remark }}</view>
										<view class="time">{{ item.createTime }}</view>
									</view>
								</view>
								<view class="right">
									<view class="amount">+{{ item.money }}元</view>
								</view>
							</view>
							<!-- <view v-if="dataList.length == 0" style="text-align: center; margin-top: 50rpx">暂无数据</view> -->
							<view v-if="dataList.length == 0" style="width: 100%; text-align: center; margin-top: 10rpx">
								<image
									style="width: 500rpx"
									mode="widthFix"
									src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
								/>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import { getBillInfo, getBillList } from '@/api/yanxue/user'
export default {
	data() {
		return {
			current: 0,
			swiperCurrent: 0,
			list: [
				{
					name: '全部收入'
				},
				{
					name: '招生收入'
				},
				{
					name: '裂变收入'
				}
			],
			tabOptions: {
				'font-size': 26,
				'active-color': '#000',
				'inactive-color': '#000',
				'bar-width': 106,
				'bg-color': '#fff',
				gutter: 110
			},
			barStyle: {
				'background-color': '#F95513'
			},
			dataList: [
				// {
				//   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
				//   text: "子涵报名【遇见川美】第一期",
				//   time: "2024-04-01",
				//   amount: "3333",
				// },
				// {
				//   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
				//   text: "子涵报名【遇见川美】第一期",
				//   time: "2024-04-01",
				//   amount: "3333",
				// },
				// {
				//   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
				//   text: "子涵报名【遇见川美】第一期",
				//   time: "2024-04-01",
				//   amount: "3333",
				// },
				// {
				//   img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
				//   text: "子涵报名【遇见川美】第一期",
				//   time: "2024-04-01",
				//   amount: "3333",
				// },
			],
			moneyInfo: {}
		}
	},
	onLoad() {
		this.getBillInfoData()
		this.getBillListData()
	},
	methods: {
		mingxi() {
			this.$navTo('pagesA/mine/commission/billlist?nowmoney=' + this.moneyInfo.nowMoney)
		},
		toTixian() {
			this.$navTo('pagesA/mine/commission/withdrawal')
		},
		getBillInfoData() {
			getBillInfo().then(res => {
				this.moneyInfo = res.result
			})
		},
		getBillListData() {
			let obj = {
				page: 1,
				rows: 999,
				type: this.current
			}
			getBillList(obj).then(res => {
				this.dataList = res.result.list
			})
		},
		tabsChange(index) {
			this.swiperCurrent = index
		},

		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx
			this.$refs.uTabs.setDx(dx)
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			this.$refs.uTabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
			this.getBillListData()
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f6f6f6;
}
.mingxi {
	text-align: right;
	padding-right: 24rpx;
	margin-top: 20rpx;
	font-family: HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 36rpx;
	color: #000000;
}

.com-bg {
	width: 100%;
	height: 416rpx;
	background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);
	border-radius: 60rpx;

	.com {
		width: 702rpx;
		height: 368rpx;
		background: #ffffff;
		border-radius: 48rpx;
		margin: 0 auto;
		margin-top: 24rpx;

		.com-top {
			display: flex;
			justify-content: space-between;
			width: 702rpx;
			height: 240rpx;
			background: linear-gradient(0deg, #ffa233 0%, #f95513 100%);
			border-radius: 48rpx;
			padding: 30rpx 60rpx 0 48rpx;

			.com-top-left {
				display: flex;
				flex-direction: column;
				text-align: left;

				.text {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #fffefe;
				}

				.balance {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 86rpx;
					color: #fffefe;
					margin-top: 44rpx;
				}
			}

			.com-top-right {
				display: flex;
				justify-content: center;
				align-items: center;

				.btn {
					width: 169rpx;
					height: 64rpx;
					background: #ffffff;
					border-radius: 32rpx;
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 37rpx;
					color: #f95513;
					text-align: center;
					line-height: 64rpx;
				}
			}
		}

		.com-bottom {
			display: flex;
			justify-content: space-between;
			padding: 0 138rpx;
			margin-top: 30rpx;

			.bottom-item {
				display: flex;
				flex-direction: column;
				text-align: left;

				.label {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #f95513;
					text-align: center;
					line-height: 23rpx;
				}

				.content {
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 50rpx;
					color: #f95513;
					margin-top: 22rpx;
					line-height: 50rpx;
				}
			}
		}
	}
}

.com-detail {
	width: 702rpx;
	height: 964rpx;
	background: #ffffff;
	box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
	border-radius: 48rpx;
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	flex-direction: column;

	.swiper-box {
		flex: 1;
		.swiper-item {
			.content {
				padding: 30rpx 40rpx;

				.receive-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 30rpx;
					border-bottom: 2rpx solid #c4c4c4;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 74rpx;
							height: 74rpx;
							margin-right: 16rpx;
						}

						.info {
							margin-left: 20rpx;

							.text {
								font-family: HarmonyOS Sans SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #000000;
							}

							.time {
								font-family: HarmonyOS Sans SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #c4c3c3;
								line-height: 26rpx;
								margin-top: 22rpx;
							}
						}
					}

					.right {
						.amount {
							font-family: HarmonyOS Sans SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							line-height: 24rpx;
						}
					}
				}
			}
		}
	}
}
</style>
